<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子元素浮动，父容器塌陷问题解决方法</title>
		<style type="text/css">
			#container{
				border: 1px solid black;
				/*height: 200px;  方法一：固定父元素高度*/
				/*float: left;    方法二：为父元素也设置浮动*/
				/*overflow: hidden;方法三：为父元素设置溢出隐藏*/
				/*display: inline-block; 方法四：设置父元素为行内块元素*/
			}
			/* 方法六:使用after伪类,内容设置为空,并清除浮动 */
			#container:after{
				content: "";
				display: block;
				clear: both;
			}
			.div1{
				width: 100px;
				height: 100px;
				background: red;
				float: left;	
			}
			.div2{
				width: 200px;
				height: 200px;
				background: green;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<!--方法五：在父容器后设置空标签，并清除浮动-->
			<!--<div style="clear: both;"></div>-->
		</div>	
	</body>
</html>
